<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>病历夹</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #content {
            background-color: #fff;
            position: relative;
            overflow-x: hidden;
        }

        #headertop {
            width: 100%;
            height: 88px;
            background: #fff;
            border: 1px solid #F5F6FA;
            position: fixed;
            top: 0;
        }

        #header {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 16px;
        }

        #contentfrom {
            box-sizing: border-box;
            padding: 16px;
            background-color: #fff;
            margin-top: 88px;
            overflow-y: scroll;
        }

        label {
            width: 115px;
            /* 设置宽度为150像素 */
            text-align: end;
        }

        .inputcontent {
            height: 34px;
            border: none;
            background-color: #F5F6FA;
            box-sizing: border-box;
            padding: 0 16px;
            border-radius: 5px;
        }

        .selectcontent {
            height: 34px;
            border: none;
            background-color: #F5F6FA;
            box-sizing: border-box;
            padding: 0 16px;
            border-radius: 5px;
        }

        .selectcontent:focus {
            outline: 0 none;
            border: none;
        }

        .textareastyle {
            background-color: #F5F6FA;
            border: none;
            box-sizing: border-box;
            padding: 5px 16px;
            border-radius: 5px;
        }

        .bottom {
            width: 100%;
            height: 80px;
        }

        input[type="checkbox"] {
            position: relative;
            width: 12px;
            height: 12px;
            /* 用于控制 UI 控件的基于操作系统主题的原生外观。none 隐藏部件的某些特性 */
            appearance: none;
        }

        input[type="checkbox"]::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 1px solid #d9d9d9;
            background-color: #fff;
            border-radius: 50%;
        }

        input[type="checkbox"]:checked::before {
            content: "\2713";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 1px solid #31f700;
            background-color: #31f700;
            /* 对勾样式 */
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            line-height: 12px;
        }

        .tips {
            position: absolute;
            top: 20%;
            width: 80%;
            background-color: #fff;
            height: 440px;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 2px 3px 5px 1px #ccc;
            box-sizing: border-box;
            padding: 0 16px;
        }

        .tipsbox {
            position: fixed;
            top: 0;
            background-color: rgba(0, 0, 0, 0.432);
            display: none;
        }

        .inputstyle {
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css"/>

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
    <script src="../js/jquery-1.5.1.js"></script>
</head>
<body>
<div id="content">
    <div id="headertop">
        <div style="height: 44px;"></div>
        <div id="header">
            <!--<div>
                <img style="width: 14px;height: 14px;" src="../image/return.png" alt="">
            </div>-->
            <div>签到/报道</div>
            <div></div>
        </div>
    </div>
    <div id="contentfrom">
        <form action="" method="get">
            <meta name="_token" content="{{ csrf_token() }}"/>
            <div style="display: flex;align-items: center;">
                @csrf
                <label for="fname">名字：</label>
                <input placeholder="请输入 " class="styleinput inputcontent" type="text" id="user_name"
                       name="fname"><br><br>
            </div>
            <div style="display: flex;align-items: center;margin: 16px 0;">
                <label for="lname">性别：</label>
                <select class="styleinput selectcontent" name="cars" id="sex">
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>
            <div style="display: flex;align-items: center;margin: 16px 0;">
                <label for="lname">年龄：</label>
                <input placeholder="请输入 " class="styleinput inputcontent" type="text" id="age"
                       name="lname"><br><br>
            </div>
            <div style="display: flex;align-items: center;margin: 16px 0;">
                <label for="lname">报道类型：</label>
                <select class="styleinput selectcontent" name="cars" id="OptionType">
                    {{--<option value="1">关注患者</option>--}}
                    <option value="2">门诊患者</option>
                    <option value="3">住院患者</option>
                </select>
            </div>
            <div style="display: flex;align-items: center;margin: 16px 0;">
                <label for="lname">病情描述：</label>
                <textarea placeholder="请输入..." class="styleinput textareastyle" id="describe" name="w3review"
                          rows="4" cols="50"></textarea>
            </div>
            <div style="display: flex;flex-direction: column;margin: 16px 0;">
                <label for="lname">病例图片上传：</label>
                <div style=" height: 80px;margin-top: 5px; display: flex;justify-content: space-around;">
                    <div style=" width: 80px;height: 80px;">
                        <div id="fileOne1"
                             style="display: flex;flex-direction: column;justify-content: center;align-items: center; position: relative; width: 80px;height: 80px; background-color: #F5F6FA;">
                            <div>+</div>
                            <div>添加图片</div>
                            <input class="inputstyle" type="file" id="fileOne2" onchange="uploadFile('fileOne2');">
                        </div>
                        <div id="fileOne3" style="position: relative;display: none;">
                            <img style=" width: 80px;height: 80px;" id="fileOneSrc" src="../image/return.png" alt="">
                            <input class="inputstyle" type="file" id="fileOne4" onchange="uploadFile('fileOne4');">
                        </div>
                    </div>
                    <div style=" width: 80px;height: 80px;">
                        <div id="two5"
                             style="display: flex;flex-direction: column;justify-content: center;align-items: center; position: relative; width: 80px;height: 80px; background-color: #F5F6FA;">
                            <div>+</div>
                            <div>添加图片</div>
                            <input class="inputstyle" type="file" id="two6" onchange="uploadFile('two6');">
                        </div>
                        <div id="two7" style="position: relative;display: none;">
                            <img style=" width: 80px;height: 80px;" id="twoSrc" src="../image/return.png" alt="">
                            <input class="inputstyle" type="file" id="two8" onchange="uploadFile('two8');">
                        </div>
                    </div>
                    <div style=" width: 80px;height: 80px;">
                        <div id="threea"
                             style="display: flex;flex-direction: column;justify-content: center;align-items: center; position: relative; width: 80px;height: 80px; background-color: #F5F6FA;">
                            <div>+</div>
                            <div>添加图片</div>
                            <input class="inputstyle" type="file" id="threeb" onchange="uploadFile('threeb');">
                        </div>
                        <div id="threec" style="position: relative;display: none;">
                            <img style=" width: 80px;height: 80px;" id="threeSrc" src="../image/return.png" alt="">
                            <input class="inputstyle" type="file" id="threed" onchange="uploadFile('threed');">
                        </div>
                    </div>
                    <div style=" width: 80px;height: 80px;">
                        <div id="foure"
                             style="display: flex;flex-direction: column;justify-content: center;align-items: center; position: relative; width: 80px;height: 80px; background-color: #F5F6FA;">
                            <div>+</div>
                            <div>添加图片</div>
                            <input class="inputstyle" type="file" id="fourf" onchange="uploadFile('fourf');">
                        </div>

                        <div id="fourg" style="position: relative;display: none;">
                            <img style=" width: 80px;height: 80px;" id="fourSrc" src="../image/return.png" alt="">
                            <input class="inputstyle" type="file" id="fourh" onchange="uploadFile('fourh');">
                        </div>

                    </div>
                </div>
            </div>
            <div style="display: flex;align-items: center;margin: 16px 0;position: relative;">
                <label for="lname">手机号：</label>
                <input placeholder="请输入 " class="styleinput inputcontent" type="text" id="inputPhone"
                       name="lname"><br><br>
                <div id="buttoncode" onclick="getCode();"
                     style="position: absolute; right: 0;color: #31f700;margin-right: 5px;">获取验证码
                </div>
            </div>
            <div style="display: flex;align-items: center;">
                <label for="lname">验证码：</label>
                <input placeholder="请输入 " class="styleinput inputcontent" type="text" id="code" name="lname"><br><br>
            </div>
        </form>
    </div>
    <div class="bottom">
        <div style="box-sizing: border-box;padding: 5px 16px;font-size: 12px;background-color: #F5F6FA;">
            <input style="" type="checkbox" id="checkbox1" name="checkbox1">

            <label for="checkbox1"><span>请阅读并同意</span><span id="message">《信息报道相关协议》</span></label>
        </div>
        <div id="sub" style="height: 54px; display: flex;flex-direction: column; justify-content: center; background-color: #fff;box-sizing: border-box;padding: 0 16px; display: block">
            <div style=" height: 42px;line-height: 42px; background-color: #07c160; color: #fff;text-align: center;border-radius: 21px;"
                 onclick="submitInfo();">
                提交
            </div>
        </div>

        <div id="no_sub" style="height: 54px; display: flex;flex-direction: column; justify-content: center; background-color: #fff;box-sizing: border-box;padding: 0 16px; display: none">
            <div style=" height: 42px;line-height: 42px; background-color: #6969696e; color: #fff;text-align: center;border-radius: 21px;">
                提交
            </div>
        </div>
    </div>
    <div class="tipsbox" id="tipsshow">
        <div class="tips">
            <div style="font-weight: 500;font-size: 24px;text-align: center;margin: 5px;">
                《用户关注医护工作室协议》
            </div>
            <div style="text-indent: 40px; overflow-y: scroll; height: calc(400px - 50px);">
                尊敬的用户： 欢迎您使用益鹿出院APP并选择关注医护工作室。在您进行关注操作之前，请仔细阅读并理解以下协议内容：
                1.用户信息共享：当您关注医护工作室后，您的基本信息（如用户名、基本健康信息等）将进入该医护工作室的通讯录。医护工作室有权在通讯录中标记您的健康状况，以便更好地管理及提供服务。
                2.医护工作室的沟通权限：医护工作室可以通过益鹿出院APP向您发送回访信息、健康科普知识、调查问卷等信息。这些信息旨在提供医疗建议、跟进您的健康状况以及促进您的健康意识和知识提升。
                3.信息的使用目的：您的信息将仅用于医疗相关的目的，包括但不限于提供个性化的医疗服务、跟踪健康状况、发送相关提醒等。医护工作室将严格遵守医疗伦理和法律法规，确保信息的安全和保密性。
                4.隐私保护：我们高度重视您的隐私和个人信息保护。我们将采取合理的安全措施来保护您的信息，防止未经授权的访问、披露或滥用。同时，医护工作室也有义务遵守相关的隐私政策和规定，妥善处理您的信息。
                5.您的权利和选择：您有权随时取消对医护工作室的关注，从而停止接收来自该医护工作室的回访信息和健康科普知识。您也可以选择不接收特定类型的信息或限制医护工作室对您信息的使用方式。如果您对医护工作室的行为或信息处理有任何疑问或担忧，您可以随时联系我们的客服团队进行咨询和解决。
                6.协议的变更：我们可能会根据业务发展和法律要求不时修改本协议的内容。修改后的协议将在 APP
                上公布，并在生效前给予您适当的通知。请您定期查看协议的更新，以确保您了解并同意最新的条款。
                通过点击“我已阅读并同意”按钮，您表示您已经仔细阅读、理解并同意遵守本协议的所有条款和条件。如果您不同意本协议的任何内容，请不要进行关注操作。
                感谢您的合作和支持！。
            </div>
            <div id="btn"
                 style="width: 100%;height: 32px;background-color: #07c160;color: #fff;margin-top: 8px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
                同意
            </div>
        </div>
    </div>
</div>
<!-- 引入组件库 -->
<script>
    // 在 #app 标签下渲染一个按钮组件
    new Vue({
        el: '#app',
        template: `<van-button>按钮</van-button>`
    });


</script>
<script>

    var accessToken = '983604af8dac55cb80a0f7e8f6729eebd94c3157';
    // 获取视口宽度
    var viewportWidth = window.innerWidth;

    // 获取视口高度
    var viewportHeight = window.innerHeight;

    // 获取页面宽度
    var pageWidth = document.documentElement.scrollWidth;

    // 获取页面高度
    var pageHeight = document.documentElement.scrollHeight;
    let content = document.getElementById('content')
    let styleinput = document.getElementsByClassName('styleinput')
    let contentfrom = document.getElementById('contentfrom')
    let tips = document.getElementsByClassName('tips')[0]
    let tipsbox = document.getElementsByClassName('tipsbox')[0]
    content.style.width = viewportWidth + 'px'
    tipsbox.style.width = viewportWidth + 'px'
    content.style.height = viewportHeight + 'px'
    tipsbox.style.height = viewportHeight + 'px'
    contentfrom.style.height = viewportHeight - 88 - 80 + 'px'
    for (let i = 0; i <= styleinput.length - 1; i++) {
        console.log(styleinput[i])
        styleinput[i].style.width = viewportWidth - 16 - 16 - 115 + 'px'
    }

    //获取表单信息提交表单
    function submitInfo() {
        let currentUrl = window.location.href;
        let UserInput = document.getElementById('user_name');
        let AgeInput = document.getElementById('age');
        let SexInput = document.getElementById('sex');
        let OptionTypeInput = document.getElementById('OptionType');
        let describeInput = document.getElementById('describe');
        let fileInput = document.getElementById('inputPhone');
        let CodeInput = document.getElementById('code');
        let checkbox1Input = document.getElementById('checkbox1');
        let fileOneSrc = document.getElementById('fileOneSrc');
        let twoSrc = document.getElementById('twoSrc');
        let threeSrc = document.getElementById('threeSrc');
        let fourSrc = document.getElementById('fourSrc');
        let workId = document.getElementById('workId').value;
        let doctorId = document.getElementById('doctorId').value;
        let OneSrc = fileOneSrc.src;
        let two = twoSrc.src;
        let three = threeSrc.src;
        let four = fourSrc.src;

        let UserName = UserInput.value;
        if (UserName == '') {
            UserInput.placeholder = '请输入用户名';
            UserInput.focus();
            return false;
        }
        let age = AgeInput.value;
        if (age == '') {
            AgeInput.placeholder = '请输入年龄';
            AgeInput.focus();
            return false;
        }
        let Sex = SexInput.value;
        if (Sex == '') {
            SexInput.placeholder = '请选择性别';
            SexInput.focus();
            return false;
        }
        let OptionType = OptionTypeInput.value;
        if (OptionType == '') {
            OptionType.placeholder = '请选择报道类型';
            OptionType.focus();
            return false;
        }
        let describe = describeInput.value;
        if (describe == '') {
            describeInput.placeholder = '请输入病情描述';
            describeInput.focus();
            return false;
        }
        if (OneSrc == currentUrl && two == currentUrl && three == currentUrl && four == currentUrl) {
            alert('请上传病历图片');
            return false;
        }
        let arr = [OneSrc, two, three, four];
        let temp = [];
        for (let i = 0; i <= arr.length; i++) {
            if (arr[i] != undefined) {
                if (arr[i] != currentUrl) {
                    let tmpImage = arr[i].split('upload/');
                    if(tmpImage[1] == null){
                        continue;
                    }
                    temp.push(tmpImage[1]);
                }
            }
        }

        let phone = fileInput.value;
        if (phone == '') {
            fileInput.placeholder = '请输入手机号码';
            fileInput.focus();
            return false;
        }
        let Code = CodeInput.value;
        if (Code == '') {
            CodeInput.placeholder = '请输入验证码';
            CodeInput.focus();
            return false;
        }
        //检查协议是否阅读并选中
        if (!checkbox1Input.checked) {
            alert("请确认并阅读协议");
            return false;
        }
        let sub = document.getElementById('sub');
        let no_sub = document.getElementById('no_sub');
        sub.style.display = "none";
        no_sub.style.display = "block";
        $.ajax({
            url: '/input',
            type: 'POST',
            cache: false,
            timeout: 5000,
            data: {
                name: UserName,
                age: age,
                sex: Sex,
                workId: workId,
                doctorId: doctorId,
                type: OptionType,
                describe: describe,
                image: JSON.stringify(temp),
                smsCode: Code,
                phone: phone,
                rands:$('meta[name="_token"]').attr('content'),//generateRandomString(10),
            },
            dataType: 'json',
            headers: {
                'access-token': accessToken,
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            },
            success: function (data) {
                if (data.code == 0) {
                    alert(data.msg);
                    let sub = document.getElementById('sub');
                    let no_sub = document.getElementById('no_sub');
                    sub.style.display = "block";
                    no_sub.style.display = "none";
                } else {
                    alert(data.msg);
                    window.location = '/case-history';
                }
                console.log(data);
            },
            error: function (xhr, status, error) {
                // 处理错误
                console.error(error);
            }
        });
    }



    function generateRandomString(length) {
        let result = '';
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        const charactersLength = characters.length;
        for (let i = 0; i < length; i++) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return result;
    }


    //设置获取验证码按钮倒计时
    function countdown() {
        var getCodeBtn = document.getElementById('buttoncode');
        var time = 60;  // 倒计时时间，单位为秒
        getCodeBtn.disabled = true;  // 禁用按钮
        var timer = setInterval(function () {
            if (time > 0) {
                time--;
                getCodeBtn.innerHTML = '重新发送(' + time + 's)';
            } else {
                clearInterval(timer);
                getCodeBtn.innerHTML = '获取验证码';
                getCodeBtn.disabled = false;  // 启用按钮
            }
        }, 1000);
    }

    function uploadFile(fileName) {
        let inputName = fileName.slice(-1);
        let formdata = new FormData();
        let file = $('#' + fileName)[0].files[0];
        if (!/image\/(jpeg|png|gif|bmp)/.test(file.type)) {
            alert('只能上传.jpg,.png,.gif,.bmp格式的图片!');
            return;
        }
        if (file.size > (2 * 1024 * 1024)) { // 2MB
            alert('图片大小不能超过2MB!');
            return;
        }
        // // 上传到服务器的字段名称
        formdata.append("imgFile", $('#' + fileName)[0].files[0]);
        $.ajax({
            url: '/inputFile',
            type: 'POST',
            cache: false,
            data: formdata,
            timeout: 5000,
            //必须false才会避开jQuery对 formdata 的默认处理
            // XMLHttpRequest会对 formdata 进行正确的处理
            processData: false,
            //必须false才会自动加上正确的Content-Type
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            },
            xhrFields: {
                withCredentials: true
            },
            success: function (result) {
                if (inputName == 4 || inputName == 2) {
                    let imgElement = document.getElementById('fileOneSrc');
                    delete imgElement.src;
                    imgElement.src = '../upload/' + result.data.imagePath;
                    fileOne();
                }
                if (inputName == 6 || inputName == 8) {
                    let imgElement = document.getElementById('twoSrc');
                    imgElement.src = '../upload/' + result.data.imagePath;
                    fileTwo();
                }
                if (inputName == 'd' || inputName == 'b') {
                    let imgElement = document.getElementById('threeSrc');
                    imgElement.src = '../upload/' + result.data.imagePath;
                    fileThree();
                }
                if (inputName == 'f' || inputName == 'h') {
                    let imgElement = document.getElementById('fourSrc');
                    imgElement.src = '../upload/' + result.data.imagePath;
                    fileFour();
                }
                console.log(result);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest, textStatus, errorThrown);
            }
        });
    }

    //第一组
    function fileOne() {
        let fileOne1 = document.getElementById('fileOne1');
        let fileOne3 = document.getElementById('fileOne3');
        fileOne1.style.display = "none";
        fileOne3.style.display = "block";
    }

    //第二组
    function fileTwo() {
        let two5 = document.getElementById('two5');
        let two7 = document.getElementById('two7');
        two5.style.display = "none";
        two7.style.display = "block";
    }

    //第三组
    function fileThree() {
        let threea = document.getElementById('threea');
        let threec = document.getElementById('threec');
        threea.style.display = "none";
        threec.style.display = "block";
    }

    //第四组
    function fileFour() {
        let foure = document.getElementById('foure');
        let fourg = document.getElementById('fourg');
        foure.style.display = "none";
        fourg.style.display = "block";
    }

    //获取验证码
    function getCode() {
        let fileInput = document.getElementById('inputPhone');
        let phone = fileInput.value;
        if (phone == '') {
            fileInput.placeholder = '请输入手机号码';
            fileInput.focus();
            return false;
        }
        if (validatePhone(phone) == false) {
            fileInput.value = '';
            fileInput.placeholder = '手机号码不正确';
            fileInput.focus();
            return false;
        }
        countdown();
        // 发送 GET 请求
        $.ajax({
            url: '/api/sms/',
            type: 'GET',
            data: {phone: phone},
            dataType: 'json',
            headers: {
                'access-token': accessToken
            },
            success: function (data) {
                // 处理响应数据
                if (data.code == 1) {
                    console.log("发送成功");
                } else {
                    console.log("发送失败");
                }
            },
            error: function (xhr, status, error) {
                // 处理错误
                console.error(error);
            }
        });
    }

    //检查手机号码是否合法
    function validatePhone(phoneNumber) {
        // 定义手机号正则表达式
        const phoneRegex = /^1[34578]\d{9}$/;
        // 使用test方法检查手机号是否符合格式
        if (phoneRegex.test(phoneNumber)) {
            return true;
        } else {
            return false;
        }
    }

    let checkbox1Input = document.getElementById('checkbox1');
    let message = document.getElementById('message')
    let tipsshow = document.getElementById('tipsshow')
    let btn = document.getElementById('btn')
    message.addEventListener('click', function (event) {
        checkbox1Input.checked = true
        tipsshow.style.display = 'block'
    }, false)
    btn.addEventListener('click', function () {
        checkbox1Input.checked = true
        tipsshow.style.display = 'none'
    })
</script>
</body>

</html>